<template>
    <div class="article-list-container">
        <van-pull-refresh 
            v-model="isRefreshLoading" 
            @refresh="onRefresh"
            :success-duration="1500"
            :success-text="refreshSuccessText"
        >
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                v-model:error="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad"
                >
                <!-- <van-cell v-for="item in list" :key="item.art_id" :title="item.title" /> -->
                <article-item v-for="(article, index) in list" :key="index" :article="article" >
                </article-item >
            </van-list>
        </van-pull-refresh>

    </div>
</template>
<script>
import { getArcticelList } from '@/apis/article';

import ArticleItem from '@/components/article-item/index.vue'

export default {
    props: {
        channel: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            list: [],
            loading : false,
            finished : false,
            timestamp : null,
            error : false,
            isRefreshLoading: false,
            refreshSuccessText: '刷新成功'
        }
    },
    components: {
        ArticleItem
    },
    methods: {
        // 下拉刷新
        async onRefresh() {
            try {
                const {data : res} = await getArcticelList({
                    channel_id: this.channel.id,
                    timestamp: Date.now()
                })
                // if (Math.random() > 0.5) {
                //     JSON.parse('asdahiqwe')
                // }
                this.list.unshift(...res.data.results)
                this.isRefreshLoading = false
                this.refreshSuccessText = `刷新成功,更新了${res.data.results.length}条数据`
            } catch (error) {
                this.refreshSuccessText = `刷新失败`
                this.isRefreshLoading = false
            }
        },
        // 上拉加载更多
        async onLoad() {
            // 异步更新数据
            try {
                const {data : res} = await getArcticelList({
                    channel_id: this.channel.id,
                    timestamp: this.timestamp || Date.now()
                })
                // if (Math.random() > 0.5) {
                //     JSON.parse('asdahiqwe')
                // }
                // 运行展开运算符添加元素
                this.list.push(...res.data.results);
                // 加载状态结束
                this.loading = false;
                if (res.data.results.length > 0) {
                    this.timestamp = res.data.pre_timestamp
                } else {
                    //加载全部
                    this.finished = true;
                }
            } catch (error) {
                this.error = true
                this.loading = false
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .article-list-container {
        height: 79vh;
        overflow-y: auto;
    }
</style>